<template>
  <div class="yezs-page">
    <div class="body-cont">
      <div class="card-shadow">
        <ul>
          <li class="grey">订&nbsp;单&nbsp;号：<span class="dark">{{order.orderNo}}</span></li>
          <li><span class="grey">服务类型：</span> <span class="tips">育儿知识</span></li>
          <li class="grey">下单时间：{{order.createDate}}</li>
          <li class="grey">姓名：{{order.knowledgeUsername}}</li>
          <li class="grey">联系方式：{{order.phone}}</li>
        </ul>
      </div>
      <div class="card card-shadow" v-if="order.remarks">
        <div class="note">
          <p class="dark font14">备注</p>
          <div class="grey font14">{{order.remarks}}</div>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <view class="btn-full" @tap="goBack" >返回</view>
    </div>
  </div>
</template>
<script>
  import getOrderDetail from '@/interface/order/getOrderDetail'

  export default {
    data () {
      return {
        order: {}
      }
    },
    methods: {
      goBack () {
        this.navigateBack();
      }
    },
    mounted () {
      const { id } = this.$root.$mp.query
      getOrderDetail({ id }).then(data => {
        this.order = data
      })
    }
  }
</script>
<style lang="less" scoped>
.yezs-page{
  padding-top: 40upx
}
.card-shadow {
  background: #fff;
  margin-bottom: 30upx;
}
.card-shadow ul {
  padding: 20upx 28upx 47upx;
}
.card-shadow ul li {
  font-size: 28upx;
  margin: 20upx 0;
}
.card-shadow ul li .tips {
  display: inline-block;
  border-radius: 4upx;
  background-color: #fa4b70;
  padding: 0 20upx;
  height: 54upx;
  line-height: 54upx;
  text-align: center;
  color: #fff;
}
.card-shadow .note {
  padding: 0upx 28upx 52upx;
  .dark{
    margin-bottom: 16upx;
  }
}
.btn-box {
  margin-top: -40upx;
}

</style>
